<template>
	<div id="page">
		<van-nav-bar class="navTop" :title="$t('header.identity_authentication')" left-arrow="" @click-left="navLeft">
		</van-nav-bar>
		<img class="page-bg" src="../../assets/app-bg.jpg">

		<div class="main">
			<!-- <div class="upimg">
				<img v-if="userData.audit_url" class="img" :src="userData.audit_url" />
				<van-uploader
					class="up_index"
					:before-read="beforeRead"
					:max-count="1">
				</van-uploader>
			</div> -->
			<div class="upimg">
				<img v-if="userData.audit_url" class="img" :src="userData.audit_url" />
				<div v-else class="iconfont f-c-lan">&#xe780;</div>
				<input v-if="userData.ty_audit != 'wait' && userData.ty_audit != 'pass' " type="file" title=""
					:multiple="true" ref="myfile" class="select-file-input" accept=".jpg,.jpeg,.png"
					@change="handleFileChange"></input>

				<div v-else class="select-file-input" @click="upImg()"></div>
			</div>
			<div class="btn hui" v-if="userData.ty_audit == 'wait'" @click="upImg()">
				{{$t('page.btn_wait')}}
			</div>
			<div class="btn btn-c-lan" v-else-if="userData.ty_audit == 'pass'" @click="upImg()">
				{{$t('page.btn_pass')}}
			</div>
			<div class="btn btn-c-lan" v-else-if="userData.ty_audit == 'fail'" @click="upImg()">
				{{$t('page.btn_fail')}}
			</div>
			<div class="btn btn-c-lan" v-else @click="upImg()">
				{{$t('page.Confirm_upload')}}
			</div>


			<!-- <input type="file" title="" :multiple="true" accept=".jpg,.jpeg,.png" @change="handleFileChange"></input>
			<div class="btn btn-c-lan" @click="upImg()">
				{{$t('page.Confirm_upload')}}666
			</div> -->
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	import {
		mapState
	} from "vuex";
	import store from '@/store'
	import Web3 from "web3";

	import * as imageConversion from 'image-conversion'
	export default {
		name: "identity",
		data() {
			return {
				userData: {},
				imgs: '',
				avatar: "",
				formData: null
			}
		},
		mounted() {
			this.$parent.UserInfo(this.$dapp.getAddress())
			this.userData = this.$store.state.user
			console.log(this.userData)
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				// 新旧地址对比
				console.log(e)
				if (e.address == this.$dapp.getAddress()) {
					this.userData = e;
				} else {
					this.$parent.UserInfo(this.$dapp.getAddress())
				}
				this.$forceUpdate();
			}
		},
		methods: {
			navLeft() {
				// this.$router.go(-1); //返回上一层
        this.$router.push({
          path: "my"
        })
			},
			beforeRead(file) {
				// 上传之前校验
				return new Promise((resolve, reject) => {
					console.log('压缩前', file)
					console.log('压缩前', file.size) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会此值可自行定义
					imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
						res = new File([res], file.name, {
							type: res.type,
							lastModified: Date.now()
						})
						console.log('压缩后', res)
						console.log('压缩后', res.size)
						resolve(res)
					})
				})
			},


			handleFileChange(e) {
				let _this = this;

				Toast.loading()
				var files = Array.prototype.slice.call(e.target.files)
				var file = files[0]

				// 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会此值可自行定义
				var reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onloadend = function() {
					_this.userData.audit_url = this.result;
					// console.log(_this.userData.audit_url)
					_this.$forceUpdate();
				}

				this.userData.ty_audit = '';

				return new Promise((resolve, reject) => {
					console.log('压缩前', file)
					imageConversion.compressAccurately(file, 300).then(res => { // console.log(res)
						res = new File([res], file.name, {
							type: res.type,
							lastModified: Date.now()
						})
						console.log('压缩后', res.size)
						let formData = new FormData()
						formData.append('pic', res)
						formData.append('address', _this.$dapp.getAddress())
						_this.formData = formData;
						resolve(res)
					})
				})
			},
			async afterRead(e) {
				var files = Array.prototype.slice.call(e.target.files);
				console.log(files[0])
				let formData = new FormData()
				formData.append('pic', files[0])
				formData.append('address', this.$dapp.getAddress())
				// var formData = this.formData;

				this.axios({
					method: 'POST',
					url: '/chss/user/identy_submit',
					data: formData,
					processData: false, //必不可少参数
					traditional: true, //比不可少参数
					contentType: false, //比不可少参数
				}).then(res => {
					console.log(res)
				})
			},
			async upImg() {
				Toast.loading({
					duration: 0
				});
				if (this.userData.ty_audit == 'wait') {
					Toast.fail(this.$t('tis.up_wait'))
					console.log('待审核')
					return;
				} else if (this.userData.ty_audit == 'pass') {
					Toast.fail(this.$t('tis.up_pass'))
					console.log('成功')
					return;
				} else if (!this.$dapp.getAddress()) {
					Toast.fail(this.$t('tis.addressNo'))
					console.log("没有地址")
					return
				} else if (!this.formData) {
					Toast.fail(this.$t('tis.upimgNo'))
					console.log("请点击上面选择图片!")
					return
				}

				this.axios({
					method: 'POST',
					url: '/chss/user/identy_submit',
					data: this.formData,
					processData: false, //必不可少参数
					traditional: true, //比不可少参数
					contentType: false, //比不可少参数
				}).then(res => {
					console.log(res)
					Toast(res.data.msg)
					setTimeout(() => {
						this.$parent.UserInfo(this.$dapp.getAddress())
						this.$forceUpdate();
					}, 500)
				})

				// const {err,res} = await this.$request.post("/api/v1/identy_submit", this.formData);
				// if (err === null) {
				// 	this.imgs = res.pic_addr
				// 	setTimeout(() =>{
				// 		Toast.success(this.$t('tis.upSuccess'))
				// 		this.$parent.UserInfo(this.$dapp.getAddress())
				// 	},500)
				// }
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {}

	.bok {
		padding: 0px 30px;
	}

	.upimg {
		margin: 100px;
		border: 2px solid #00B0E8;
		border-radius: 10px;
		overflow: hidden;
		min-height: 250px;
		display: flex;
		align-items: center;
		position: relative;
		background: rgba(0, 0, 0, 0.3);

		.img {
			width: 100%;
			background: #FFF;
			margin: 0px;
		}

		.up_index {}

		.iconfont {
			font-size: 80px;
			text-align: center;
			display: block;
			width: 100%;
		}

	}

	.btn {
		text-align: center;
		margin: 10px;
		height: 80px;
		display: block;
		line-height: 80px;
		color: #333;
		border-radius: 50px;
		position: relative;
		margin: 100px;
	}

	.hui {
		background: #b2b3b7;
		color: #666;
	}

	.select-file-input {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 9;
		opacity: 0px;

		.van-uploader__wrapper {
			display: block
		}

		div {
			display: block
		}
	}
</style>
